<template>
    <div class="app-container">
        <el-row :gutter="15">
            <el-col style="margin-bottom: 10px;">
                <el-card class="box-card" shadow="never">
                    <div slot="header" class="clearfix">
                        <span class="role-span">字段配置：{{ tableName }}</span>
                        <el-button
                            :loading="genLoading"
                            icon="el-icon-s-promotion"
                            size="mini"
                            style="float: right; padding: 6px 9px;"
                            type="success"
                            @click="toGen"
                        >
                            保存&生成
                        </el-button>
                        <el-button
                            :loading="columnLoading"
                            icon="el-icon-check"
                            size="mini"
                            style="float: right; padding: 6px 9px; margin-right: 9px;"
                            type="primary"
                            @click="saveColumnConfig"
                        >
                            保存
                        </el-button>
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="数据库中表字段变动时使用该功能"
                            placement="top-start"
                        >
                            <el-button
                                :loading="syncLoading"
                                icon="el-icon-refresh"
                                size="mini"
                                style="float: right; padding: 6px 9px;"
                                type="info"
                                @click="sync"
                            >
                                同步
                            </el-button>
                        </el-tooltip>
                    </div>
                    <el-form size="small" label-width="90px">
                        <el-table
                            v-loading="loading"
                            :data="data"
                            :max-height="tableHeight"
                            size="small"
                            style="width: 100%; margin-bottom: 15px;"
                        >
                            <el-table-column prop="columnName" label="字段名称" />
                            <el-table-column prop="columnType" label="字段类型" />
                            <el-table-column prop="remark" label="字段描述">
                                <template slot-scope="scope">
                                    <el-input v-model="data[scope.$index].remark" size="mini" class="edit-input" />
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="必填" width="70px">
                                <template slot-scope="scope">
                                    <el-checkbox v-model="data[scope.$index].notNull" />
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="列表" width="70px">
                                <template slot-scope="scope">
                                    <el-checkbox v-model="data[scope.$index].listShow" />
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="表单" width="70px">
                                <template slot-scope="scope">
                                    <el-checkbox v-model="data[scope.$index].formShow" />
                                </template>
                            </el-table-column>
                            <el-table-column label="表单类型">
                                <template slot-scope="scope">
                                    <el-select
                                        v-model="data[scope.$index].formType"
                                        filterable
                                        class="edit-input"
                                        clearable
                                        size="mini"
                                        placeholder="请选择"
                                    >
                                        <el-option label="文本框" value="Input" />
                                        <el-option label="文本域" value="Textarea" />
                                        <el-option label="单选框" value="Radio" />
                                        <el-option label="下拉框" value="Select" />
                                        <el-option label="日期框" value="Date" />
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="查询方式">
                                <template slot-scope="scope">
                                    <el-select
                                        v-model="data[scope.$index].queryType"
                                        filterable
                                        class="edit-input"
                                        clearable
                                        size="mini"
                                        placeholder="请选择"
                                    >
                                        <el-option label="=" value="=" />
                                        <el-option label="!=" value="!=" />
                                        <el-option label=">=" value=">=" />
                                        <el-option label="<=" value="<=" />
                                        <el-option label="Like" value="Like" />
                                        <el-option label="NotNull" value="NotNull" />
                                        <el-option label="BetWeen" value="BetWeen" />
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="日期注解">
                                <template slot-scope="scope">
                                    <el-select
                                        v-model="data[scope.$index].dateAnnotation"
                                        filterable
                                        class="edit-input"
                                        clearable
                                        size="mini"
                                        placeholder="请选择"
                                    >
                                        <el-option label="自动创建时间" value="CreationTimestamp" />
                                        <el-option label="自动更新时间" value="UpdateTimestamp" />
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="关联字典">
                                <template slot-scope="scope">
                                    <el-select
                                        v-model="data[scope.$index].dictName"
                                        filterable
                                        class="edit-input"
                                        clearable
                                        size="mini"
                                        placeholder="请选择"
                                    >
                                        <el-option
                                            v-for="item in dicts"
                                            :key="item.id"
                                            :label="item.remark === '' ? item.name : item.remark"
                                            :value="item.name"
                                        />
                                    </el-select>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form>
                </el-card>
            </el-col>
            <el-col>
                <el-card class="box-card" shadow="never">
                    <div slot="header" class="clearfix">
                        <span class="role-span">生成配置</span>
                        <el-button
                            :loading="configLoading"
                            icon="el-icon-check"
                            size="mini"
                            style="float: right; padding: 6px 9px;"
                            type="primary"
                            @click="doSubmit"
                        >
                            保存
                        </el-button>
                    </div>
                    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="78px">
                        <el-form-item label="作者名称" prop="author">
                            <el-input v-model="form.author" style="width: 40%;" />
                            <span style="color: #c0c0c0; margin-left: 10px;">类上面的作者名称</span>
                        </el-form-item>
                        <el-form-item label="模块名称" prop="moduleName">
                            <el-input v-model="form.moduleName" style="width: 40%;" />
                            <span style="color: #c0c0c0; margin-left: 10px;">模块的名称，请选择项目中已存在的模块</span>
                        </el-form-item>
                        <el-form-item label="至于包下" prop="pack">
                            <el-input v-model="form.pack" style="width: 40%;" />
                            <span style="color: #c0c0c0; margin-left: 10px;"
                                >项目包的名称，生成的代码放到哪个包里面</span
                            >
                        </el-form-item>
                        <el-form-item label="接口名称" prop="apiAlias">
                            <el-input v-model="form.apiAlias" style="width: 40%;" />
                            <span style="color: #c0c0c0; margin-left: 10px;">接口的名称，用于控制器与接口文档中</span>
                        </el-form-item>
                        <el-form-item label="前端路径" prop="path">
                            <el-input v-model="form.path" style="width: 40%;" />
                            <span style="color: #c0c0c0; margin-left: 10px;"
                                >输入views文件夹下的目录，不存在即创建</span
                            >
                        </el-form-item>
                        <!--            <el-form-item label="接口目录">-->
                        <!--              <el-input v-model="form.apiPath" style="width: 40%" />-->
                        <!--              <span style="color: #C0C0C0;margin-left: 10px;">Api存放路径[src/api]，为空则自动生成路径</span>-->
                        <!--            </el-form-item>-->
                        <el-form-item label="去表前缀" prop="prefix">
                            <el-input v-model="form.prefix" placeholder="默认不去除表前缀" style="width: 40%;" />
                            <span style="color: #c0c0c0; margin-left: 10px;">默认不去除表前缀，可自定义</span>
                        </el-form-item>
                        <el-form-item label="是否覆盖" prop="cover">
                            <el-radio-group v-model="form.cover" size="mini" style="width: 40%;">
                                <el-radio-button label="true">
                                    是
                                </el-radio-button>
                                <el-radio-button label="false">
                                    否
                                </el-radio-button>
                            </el-radio-group>
                            <span style="color: #c0c0c0; margin-left: 10px;">谨防误操作，请慎重选择</span>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import crud from '@/mixins/crud';
import { update, get } from '@/api/generator/genConfig';
import { save, sync, generator } from '@/api/generator/generator';
import { getDicts } from '@/api/system/dict';
export default {
    name: 'GeneratorConfig',
    components: {},
    mixins: [crud],
    data() {
        return {
            activeName: 'first',
            tableName: '',
            tableHeight: 550,
            columnLoading: false,
            configLoading: false,
            dicts: [],
            syncLoading: false,
            genLoading: false,
            form: {
                id: null,
                tableName: '',
                author: '',
                pack: '',
                path: '',
                moduleName: '',
                cover: 'false',
                apiPath: '',
                prefix: '',
                apiAlias: null,
            },
            rules: {
                author: [{ required: true, message: '作者不能为空', trigger: 'blur' }],
                pack: [{ required: true, message: '包路径不能为空', trigger: 'blur' }],
                moduleName: [{ required: true, message: '包路径不能为空', trigger: 'blur' }],
                path: [{ required: true, message: '前端路径不能为空', trigger: 'blur' }],
                apiAlias: [{ required: true, message: '接口名称不能为空', trigger: 'blur' }],
                cover: [{ required: true, message: '不能为空', trigger: 'blur' }],
            },
        };
    },
    created() {
        this.tableHeight = document.documentElement.clientHeight - 385;
        this.tableName = this.$route.params.tableName;
        this.$nextTick(() => {
            this.init();
            get(this.tableName).then((data) => {
                this.form = data;
                this.form.cover = this.form.cover.toString();
            });
            getDicts().then((data) => {
                this.dicts = data;
            });
        });
    },
    methods: {
        beforeInit() {
            this.url = 'api/generator/columns';
            const tableName = this.tableName;
            this.params = { tableName };
            return true;
        },
        saveColumnConfig() {
            this.columnLoading = true;
            save(this.data)
                .then((res) => {
                    this.notify('保存成功', 'success');
                    this.columnLoading = false;
                })
                .catch((err) => {
                    this.columnLoading = false;
                    console.log(err.response.data.message);
                });
        },
        doSubmit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.configLoading = true;
                    update(this.form)
                        .then((res) => {
                            this.notify('保存成功', 'success');
                            this.form = res;
                            this.form.cover = this.form.cover.toString();
                            this.configLoading = false;
                        })
                        .catch((err) => {
                            this.configLoading = false;
                            console.log(err.response.data.message);
                        });
                }
            });
        },
        sync() {
            this.syncLoading = true;
            sync([this.tableName])
                .then(() => {
                    this.init();
                    this.notify('同步成功', 'success');
                    this.syncLoading = false;
                })
                .then(() => {
                    this.syncLoading = false;
                });
        },
        toGen() {
            this.genLoading = true;
            save(this.data)
                .then((res) => {
                    this.notify('保存成功', 'success');
                    // 生成代码
                    generator(this.tableName, 0)
                        .then((data) => {
                            this.genLoading = false;
                            this.notify('生成成功', 'success');
                        })
                        .catch((err) => {
                            this.genLoading = false;
                            console.log(err.response.data.message);
                        });
                })
                .catch((err) => {
                    this.genLoading = false;
                    console.log(err.response.data.message);
                });
        },
    },
};
</script>

<style rel="stylesheet/scss" lang="scss">
.edit-input {
    .el-input__inner {
        border: 1px solid #e5e6e7;
    }
}
</style>

<style scoped>
/deep/ .input-with-select .el-input-group__prepend {
    background-color: #fff;
}
</style>
